import React, { useState, Component } from 'react'
import Son1 from './components/Son1';
/**
 * 函数组件针对 状态数据state已经做过优化了 ，当状态不变的时候，只会多重复渲染一次
 *              props外部数据没有优化，外部数据不变，还会重新渲染
 * 
 * 希望函数组件也能向纯组件一样：
 *  1. state、props如果不变，就不重新渲染
 */
export default class App extends Component {
    state = {
        count:100
    }
    render() {
        console.log('App render');
        let {count} = this.state;
        return (
            <div>
                <h3>App</h3>
                <p>App state count: {count}</p>
                <p><button onClick={() => {
                    this.setState({
                        count:count + 1
                    })
                }}>count ++ </button></p>

                <p><button onClick={() => {
                    this.setState({
                        count:999
                    })
                }}>count == 999 </button></p>

                <hr />
                <Son1 count={count} />
            </div>
        )
    }

}
